<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link href="../../css/bootstrap.min.css" rel="stylesheet">
		<script type="text/javascript" src="../../js/jquery-2.1.4.js"></script>
		<script src="../../js/bootstrap.min.js"></script>
		<script type="text/javascript" src="../../js/path.js"></script>
		<style>
			td {
				text-align: center;
			}
			
			#container {
				width: 70%;
				margin-left: 200px;
			}
			
			#jieguo {
				color: red;
			}
			
			.close{
				float: right;
			}
			
			#updatePage {
				width: 50%;
			}
			button{
				background-color: greenyellow;
			}
		</style>
	</head>
	<body>
		<div class="panel panel-info" id="container" align="center">
			<div class="panel-heading">
				<h1 class="panel-title">查看教师信息</h1>
			</div>
			<br />
			<input type="button" value="增加"  id="add"/>
			<input type="button" value="修改" id="update"/>
			<input type="button" value="删除" id="deletes" />
			<div class="panel-body">
				<table class="table table-striped" border="1" cellpadding="0" cellspacing="0">
					<tr>
						<td>
							<input type="checkbox" id="all"/>
						</td>
						<td>教师编号</td>
						<td>教师名称</td>
						<td>教师工资</td>
						
						<td>教师职称</td>

					</tr>
					</table>
				
			</div>
				</table>
				<div id="jieguo"></div>
			</div>
			
		</div>
		
		<script>
			
			
			
			var xx = getPath() + "/TeacherController";
			var currentPage = 1;
			var pageSize = 3;
			$(function(){

				ajax();
			
				
				//当点击三个按钮时进行的操作
				
				$('#add').click(function(){
					
					window.location.href="add-teacher.html";
				})
				var id='';
				$('#update').click(function(){
					var ids = $('input[type=checkbox]:checked');
					//判断有多少个被选中 多个被选中时保错
					if(ids.length>1 || ids.val()=='on'){
						$('#jieguo').text("请重新选中，只能选中一个有效的修改框...");
						
					}else if(ids.length==1){
						
						id=$('input[type=checkbox]:checked').val();
						//window.location.href="bankcard-update.jsp?id="+id+"";
						 window.location.href='teacher-update.jsp?id='+id;
					}else{
						$('#jieguo').text("请选中一个有效的修改框...");
					}
					
				});
				
				$('#deletes').click(function(){
					var inp = $('input[type=checkbox]:checked');
					//alert(inp.length);
					var ids="";
					inp.each(function(index,data){
						var val= data.value;
						if(val!='on'){
							ids = ids+val+",";
						}
						
					})
					
					var idst = ids.substring(0,ids.length-1);
					//console.log(idst);
					//ID字符串正确时执行删除操作
					if(idst!=null && idst != ""){
						$.ajax({
							type: 'post',
							url: xx,
		
							data: {
								'method': 'deleteByIds',
								'ids':idst
							},
							async: true,
							dataType: 'json',
							success: function(jsonData) {
								if(jsonData.result=='success'){
									$('.cleanT').empty();
									ajax();
								}else{
									$('#jieguo').text(jsonData.jieguo);
								}
								
							}
						})
					}else{
						$('#jieguo').text("请选中有效的修改框...");
					}
				});
			});
			
			//当点击全选按钮时代表着全部的多选框都要被选中
			
			$('#all').click(function(){
				var ch = $('#all')[0].checked;
				//console.log(ch);
				//如果被选中则表明全选
				if(ch){
					$('input[type=checkbox]').attr('checked',true);
				}else{
					$('input[type=checkbox]').attr('checked',false);
				}
				
			});
			function ajax() {
				$.ajax({

					type: 'post',
					url: xx,

					data: {
						'method': 'findAllTeachers',
						
					},
					async: true,
					dataType: 'json',
					success: function(jsonData) {
						console.log(jsonData.result);
						if(jsonData.result=='success') {
							var data=jsonData.data;
							$(data).each(function(index, data) {
						
								var id=data.id;
								var teacherName=data.teacherName;
								var salary=data.salary;
								//解析
								var positionName=data.positionName;
								var positional=data.positional;
								
								var tr=$('<tr class="cleanT"></tr>');
								var inp=$('<td><input type="checkbox" value="'+id+'"/></td>');
								var td1=$('<td>'+id+'</td>');
								var td2=$('<td>'+teacherName+'</td>');
								var td3=$('<td>'+ salary+ '</td>');
								var td5=$('<td>'+ positionName +'</td>');
								
								
								$('.table').append(tr);
								
								tr.append(inp);
								tr.append(td1);
								tr.append(td2);
								tr.append(td3);
								tr.append(td5);
								
							})
						}
					}
				});
				
			}
		</script>
	</body>
</html>
